import React, { Component, lazy, Suspense} from 'react'
import { Navigate,Routes, Route} from 'react-router-dom'
import memoryUtils from '../../utils/memoryUtils'
import { Layout } from 'antd';
import LeftNav from '../../components/left-nav';
import Header from '../../components/header';

// 路由懒加载
const Home = lazy(() => import('../Home'))
const Category = lazy(() => import('../Category'))
const Product = lazy(() => import('../Product'))
const Role = lazy(() => import('../Role'))
const User = lazy(() => import('../User'))
const Bar = lazy(() => import('../Charts/bar'))
const Pie = lazy(() => import('../Charts/pie'))
const Line = lazy(() => import('../Charts/line'))



const { Footer, Sider, Content } = Layout;


export default class Admin extends Component {
  
  render() {
    const user = memoryUtils.user
    // 内存中没有user 当前没有登录，自动跳转到登录
    if (!user || !user._id) {
      return <Navigate to='/login'></Navigate>
    }

    

    return (
      <Layout style={{ height: '100%' }}>
        <Sider>
          <LeftNav />
        </Sider>
        <Layout>
          <Header>hello </Header>

          <Content style={{ backgroundColor: 'white', margin:'15px' ,overflow:'auto'}}>
          {/* 注册路由 懒加载 */}
            <Suspense fallback={<h1>Loading.....</h1>}>
              <Routes>
                <Route path='home' element={<Home />} ></Route>
                <Route path='category' element={<Category />} ></Route>
                <Route path='product/*' element={<Product />} ></Route>
                <Route path='user' element={<User />} ></Route>
                <Route path='role' element={<Role />} ></Route>
                <Route path='charts/pie' element={<Pie />} ></Route>
                <Route path='charts/line' element={<Line />} ></Route>
                <Route path='charts/bar' element={<Bar />} ></Route>
              </Routes>
            </Suspense>
          </Content>

          <Footer style={{ textAlign: 'center', color: 'rgba(21, 20, 13, 0.2)' }}>推荐使用谷歌浏览器，可以获得更佳页面效果</Footer>
        </Layout>
      </Layout>
    );
  }
}


